<template>
  <div class="detail-page">
    <!-- Your component content here -->
    <div :class="{'page-top': true, 'page-top-two': detail.type === 'two', 'page-top-three':  detail.type === 'three'}">
      <div class="close-btn" @click.stop="goBack()">
        <img :src="defaultBackIcon" />
      </div>
    </div>
    <div class="detail-content">
      <img :src="detail.img" />
      <div class="detail-title">{{detail.title}}</div>
      <p v-html="detail.content"></p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      defaultBackIcon: ''
      // Your data properties here
    };
  },
  methods: {
    // Your component methods here
    goBack() {
      this.$emit('callback');
    }
  },
  mounted() {
    // Code to run when the component is mounted
  },
};
</script>

<style scoped>
/* Your component styles here */
.page-top {
  height: 16vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  background: url('./img/page1-bg.jpg') no-repeat 0 0;
  background-size: 100%;
  position: fixed;
  top: 0;
}
.page-top-two {
  background: url('./img/page2-bg.jpg') no-repeat 0 0;
  background-size: 100% 100%;
}
.page-top-three {
  /* background: url('./img/page3-bg.jpg') no-repeat 0 0; */
  background-size: 100% 100%;
}
.close-btn {
  height: 100%;
  width: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.close-btn img {
  height: 24px;
  width: 12px;
  margin-bottom: 4vh;
}
.detail-content {
  margin: 0 auto;
  margin-top: 16vh;
  overflow-y: auto;
  width: 90%;
  font-size: 10px;
  font-weight: 500;
  padding-bottom: 5vh;
}
.detail-title {
  font-size: 26px;
  font-weight: 500;
}
.detail-content img {
  width: 100%;
  height: 300px;
  margin-top: 2vh;
  object-fit: contain;
}
.detail-content p {
  text-indent: 20px;
  text-align: left;
  line-height: 23px;
  font-size: 12px;
  text-align: justify;
  text-indent: 25px;
  width: 90%;
  margin: 0 auto;
}
</style>
